<!-- 首页 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>首页</title>
    <link rel="stylesheet" href="../../assets/css/reset.css" />
    <link rel="stylesheet" href="../../plugins/swiper/swiper-bundle.css" />
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <div id="home">
      <div class="home">
        <!-- header -->
        <div class="header">
          <div class="title"></div>
          <div class="search"></div>
        </div>
        <!-- banner -->
        <div class="banner">
          <!-- Swiper -->
          <div class="swiper mySwiper">
            <div class="swiper-wrapper">
              <div class="swiper-slide tac">
                <img src="../../assets/images/home/banner.png" alt="" />
              </div>
              <div class="swiper-slide">
                <img src="../../assets/images/home/banner.png" alt="" />
              </div>
            </div>
          </div>
        </div>
        <!-- news -->
        <div class="news">
          <div class="left"></div>
          <div class="right">
            <div class="items">
              <div class="item">
                <img
                  src="../../assets/images/home/tag-new.png"
                  alt=""
                  class="tag"
                />
                <span class="title"
                  >独家！产业链人士：闻泰科技承接三星什么故事啊啊啊独家！产业链人士：闻泰科技承接三星什么故事啊啊啊</span
                >
              </div>
              <div class="item">
                <img
                  src="../../assets/images/home/tag-news.png"
                  alt=""
                  class="tag"
                />
                <span class="title"
                  >独家！产业链人士：闻泰科技承接三星什么故事啊啊啊独家！产业链人士：闻泰科技承接三星什么故事啊啊啊</span
                >
              </div>
            </div>
          </div>
        </div>
        <!-- 热门产品 -->
        <div class="product">
          <div class="title">热门产品</div>
          <div class="list">
            <div class="list-titles">
              <span class="list-title">名称</span>
              <span class="list-title tac">最新</span>
              <span class="list-title tac">趋势</span>
              <span class="list-title tar">涨幅</span>
            </div>
            <div class="items">
              <div class="item">
                <div class="name">
                  <span class="top"> 沪深300 </span>
                  <span class="bottom">
                    <span class="code"> STOSX </span>
                    <img src="../../assets/images/home/xiushi.png" alt="" />
                  </span>
                </div>
                <div class="last tac">3333.851</div>
                <div class="trend tac">
                  <img src="../../assets/images/home/decrease.png" alt="" />
                </div>
                <div class="last tar">+3.62%</div>
              </div>
              <div class="item">
                <div class="name">
                  <span class="top"> 沪深300 </span>
                  <span class="bottom">
                    <span class="code"> STOSX </span>
                    <img src="../../assets/images/home/xiushi.png" alt="" />
                  </span>
                </div>
                <div class="last">3333.851</div>
                <div class="trend tac">
                  <img src="../../assets/images/home/decrease.png" alt="" />
                </div>
                <div class="last tar">+3.62%</div>
              </div>
              <div class="item">
                <div class="name">
                  <span class="top"> 沪深300 </span>
                  <span class="bottom">
                    <span class="code"> STOSX </span>
                    <img src="../../assets/images/home/xiushi.png" alt="" />
                  </span>
                </div>
                <div class="last">3333.851</div>
                <div class="trend tac">
                  <img src="../../assets/images/home/decrease.png" alt="" />
                </div>
                <div class="last tar">+3.62%</div>
              </div>
              <div class="item green">
                <div class="name">
                  <span class="top"> 沪深300 </span>
                  <span class="bottom">
                    <span class="code"> STOSX </span>
                    <img src="../../assets/images/home/busyness.png" alt="" />
                  </span>
                </div>
                <div class="last">3333.851</div>
                <div class="trend tac">
                  <img src="../../assets/images/home/increase.png" alt="" />
                </div>
                <div class="last tar">-3.62%</div>
              </div>
            </div>
          </div>
        </div>
        <div class="zw"></div>
        <!-- tabbar -->
        <div class="tabs">
          <div class="tab active">
            <img src="../../assets/images/tabs/home-active.png" alt="" />
            <span class="text">首页</span>
          </div>
          <div class="tab">
            <img src="../../assets/images/tabs/trend.png" alt="" />
            <span class="text">持仓</span>
          </div>
          <div class="tab">
            <img src="../../assets/images/tabs/service.png" alt="" />
            <span class="text">客服</span>
          </div>
          <div class="tab">
            <img src="../../assets/images/tabs/my.png" alt="" />
            <span class="text">我的</span>
          </div>
        </div>
      </div>
      <!-- 弹框 -->
      <div v-if="isShow">
        <div class="modal">
          <div class="content">
            <div class="card">
              <div class="btn">立即填写</div>
            </div>
            <div class="close" @click="close"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- Swiper JS -->
    <script src="../../plugins/swiper/swiper-bundle.min.js"></script>
    <script src="../../plugins/vue/vue.js"></script>

    <!-- Initialize Swiper -->
    <script>
      var swiper = new Swiper('.mySwiper', {
        pagination: {
          el: '.swiper-pagination'
        }
      })
    </script>
  </body>
  <script src="../../assets/js/rem.js"></script>
  <script>
    const app = new Vue({
      el: '#home',
      data() {
        return {
          isShow: true
        }
      },
      methods: {
        close() {
          this.isShow = false
        }
      }
    })
  </script>
</html>
